<template>
  <div>
    <router-link :to="'auth-user-add'">
      <el-button type="primary">
        添加用户
      </el-button>
    </router-link>

    <el-table :data="userData.records">
      <el-table-column prop="account" label="账号"/>
      <el-table-column prop="name" label="姓名"/>
      <el-table-column prop="email" label="邮箱" width="180px"/>
      <el-table-column prop="mobile" label="手机"/>
      <el-table-column prop="sex" label="性别">
        <template slot-scope="scope">
          <p v-if="scope.row.sex==='W'">女</p>
          <p v-if="scope.row.sex==='M'">男</p>
          <p v-if="scope.row.sex==='N'">未知</p>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="启用状态">
        <template slot-scope="scope">
          <p v-if="scope.row.status==true">已启用</p>
          <p v-if="scope.row.status==false">已禁用</p>
        </template>
      </el-table-column>
      <el-table-column prop="workDescribe" label="工作描述"/>
      <el-table-column prop="createTime" label="创建时间"/>
      <el-table-column label="操作" width="180px">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="onopenUserDetails(scope.row)">查看详情</el-button>
          <el-button type="primary" size="small" @click="togoUserUpdate(scope.row)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--分页-->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="Number(userData.current)"
      :page-sizes="[5, 10, 30, 50]"
      :page-size="Number(userData.size)"
      layout="total, sizes, prev, pager, next, jumper"
      :total="Number(userData.total)"
    >
    </el-pagination>


    <!--    用户详情-->
    <a-modal v-model="userFlag" title="用户详情" @ok="handleOk" okText="确定" cancelText="取消" @cancel="handleOk" :width="700">
      <a-descriptions>
        <a-descriptions-item label="用户头像">
          <a-avatar shape="square" :size="100" icon="user" :src="userDetailsData.avatar"/>
        </a-descriptions-item>
        <br/>
        <br/>
        <a-descriptions-item label="账号">
          <p v-text="userDetailsData.account"></p>
        </a-descriptions-item>

        <a-descriptions-item label="姓名">
          <p v-text="userDetailsData.name"></p>
        </a-descriptions-item>

        <a-descriptions-item label="邮箱">
          <p v-text="userDetailsData.email"></p>
        </a-descriptions-item>

        <a-descriptions-item label="电话">
          <p v-text="userDetailsData.mobile"></p>
        </a-descriptions-item>

        <a-descriptions-item label="岗位">
          <p v-text="userDetailsData.roleName"></p>
        </a-descriptions-item>

        <a-descriptions-item label="性别">
          <p v-if="userDetailsData.sex==='W'">女</p>
          <p v-if="userDetailsData.sex==='M'">男</p>
          <p v-if="userDetailsData.sex==='N'">未知</p>
        </a-descriptions-item>

        <a-descriptions-item label="状态">
          <p v-if="userDetailsData.status==true">已启用</p>
          <p v-if="userDetailsData.status==false">已禁用</p>
        </a-descriptions-item>

        <a-descriptions-item label="创建时间">
          <p v-text="userDetailsData.createTime"></p>
        </a-descriptions-item>

        <a-descriptions-item label="修改时间">
          <p v-text="userDetailsData.updateTime"></p>
        </a-descriptions-item>

        <a-descriptions-item label="最后登录时间">
          <p v-text="userDetailsData.lastLoginTime"></p>
        </a-descriptions-item>

        <a-descriptions-item label="最后一次输错密码时间">
          <p v-text="userDetailsData.passwordErrorLastTime"></p>
        </a-descriptions-item>

        <a-descriptions-item label="密码错误次数">
          <p v-text="userDetailsData.passwordErrorNum"></p>
        </a-descriptions-item>

        <a-descriptions-item label="个人描述">
          <p v-text="userDetailsData.workDescribe"></p>
        </a-descriptions-item>

      </a-descriptions>
    </a-modal>
  </div>


</template>

<script>
import index from '@/api/auth/user/index'

export default {
  name: 'index',
  data() {
    return {
      userFlag: false,
      pageNum: 1,
      pageSize: 5,
      userData: {},
      userDetailsData: {},
      roles: []
    }
  },
  mounted() {
    this.findAuthUserData()
  },
  methods: {
    togoUserUpdate(row){
      this.$router.push({path:'/auth/auth-user-update/'+row.id})
    },
    handleOk(e) {
      console.log(e)
      this.userDetailsData = {};
      this.roles=[];
      this.userFlag = false
    },
    onopenUserDetails(row) {
      index.queryAllRole().then(data => {
        this.roles = data.data;
        for (let i = 0; i < this.roles.length; i++) {
          if (row.stationId == this.roles[i].id) {
            this.userDetailsData.roleName = this.roles[i].name
          }
        }

        this.userDetailsData.account = row.account
        this.userDetailsData.name = row.name
        this.userDetailsData.email = row.email
        this.userDetailsData.mobile = row.mobile
        this.userDetailsData.sex = row.sex
        this.userDetailsData.status = row.status
        this.userDetailsData.avatar = row.avatar
        this.userDetailsData.workDescribe = row.workDescribe
        this.userDetailsData.passwordErrorLastTime = row.passwordErrorLastTime
        this.userDetailsData.passwordErrorNum = row.passwordErrorNum
        this.userDetailsData.lastLoginTime = row.lastLoginTime
        this.userDetailsData.createTime = row.createTime
        this.userDetailsData.updateTime = row.updateTime
        this.userFlag = true
      })

    },
    handleCurrentChange(val) {
      this.pageNum = val
      this.findAuthUserData()
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.findAuthUserData()

    },
    findAuthUserData() {
      index.findAuthUserData(this.pageNum, this.pageSize).then(data => {
        this.userData = data.data
      })
    }
  }
}
</script>

<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
